<!-- 访视管理 -->
<template>
  <div>
    <a-tabs v-model="selectedId" @change="handleVersionChange">
      <template>
        <a-tab-pane v-for="versionItem in versionList" :key="versionItem.id" :tab="$t('all.autotext1432') + versionItem.name">
          <a-tabs v-model="subSelectedId" tab-position="left" @change="tabChange">
            <template v-for="item in tabs">
              <a-tab-pane :key="item.id" :tab="item.name" @tabClick="activeVisitId(item.id)">
                <!-- 表格开始 -->
                <a-table
                  :columns="columns"
                  bordered
                  :data-source="visitDetail"
                  :pagination="false"
                  :rowKey="record => record.orderNumber"
                >
                  <template slot="title">
                    <!-- 标题 -->
                    <a-descriptions :title="item.id > 0 ? item.name + ':' + item.stage : item.name"></a-descriptions>
                  </template>
                  <template slot="status" slot-scope="text, record">
                    {{ record.status | enumValueByKey($const.APPROVAL_STATUS) }}
                  </template>
                  <template slot="payTime" slot-scope="text, record">
                    <span v-if="record.payTime">{{ record.payTime | moment() }}</span>
                    <span v-else>{{ '——' }}</span>
                  </template>
                </a-table>
              </a-tab-pane>
            </template>
          </a-tabs>
        </a-tab-pane>
      </template>
    </a-tabs>
  </div>
</template>

<script>
import { getVersionList } from '@/api/cost/cost'
import { getListInterView, getVisitDetail } from '@/api/overview/subject'
export default {
  name: '',
  data () {
    const columns = [
      {
        title: this.$t('all.autotext334'),
        dataIndex: 'orderNumber'
      },
      {
        title: this.$t('all.autotext1236'),
        dataIndex: 'applyType'
      },
      {
        title: this.$t('all.autotext1498'),
        dataIndex: 'status',
        scopedSlots: { customRender: 'status' }
      },
      {
        title: this.$t('all.autotext458'),
        dataIndex: 'detailAmount'
      },
      {
        title: this.$t('all.autotext722'),
        dataIndex: 'payTime',
        scopedSlots: { customRender: 'payTime' }
      }
    ]
    return {
      proId: '',
      visible: false, // 访视标识
      tabs: [],
      visitId: '',
      columns,
      modalTitle: '',
      visitDetail: [],
      versionList: [], // 版本列表
      subSelectedId: '',
      selectedId: ''
    }
  },
  props: {
    subjectId: {
      type: [Number, String],
      default: null
    }
  },
  created () {
    const pd = localStorage.getItem('CURRENT_PROID')
    if (pd) {
      this.proId = parseInt(pd)
    }
  },
  mounted () {
    this.getVersionList()
  },
  methods: {
    // 获取访视版本列表
    getVersionList () {
      if (this.proId) {
        getVersionList({ proId: this.proId })
          .then(res => {
            this.versionList = res
            // 自动请求第一个版本的第一个阶段
            if (this.versionList.length > 0) {
              this.selectedId = this.versionList[0].id
              this.getListInterView(this.selectedId)
            }
          })
      }
    },
    // 根据版本获取访视阶段
    getListInterView (val) {
      getListInterView({
        proId: this.proId,
        ptsId: this.subjectId,
        visitId: val
      }).then(res => {
        this.tabs = res
        if (this.tabs.length !== 0) {
          this.activeVisitId(this.tabs[0].id) // 自动请求第一阶段的信息用于展示
        }
      })
    },
    // 根据阶段获取详情
    activeVisitId (id) {
      this.subSelectedId = id
      getVisitDetail({ proId: this.proId, visitId: this.selectedId, visitRecordId: id, ptsId: this.subjectId })
        .then(res => {
          this.visitDetail = res
          for (let index = 0; index < this.visitDetail.length; index++) {
            this.visitDetail[index].orderNumber = index + 1
          }
        })
        .catch(() => {})
    },
    // 点击切换版本
    handleVersionChange (key) {
      const target = this.versionList.find(item => item.id === Number(key))
      this.getListInterView(target.id)
    },
    // 点击切换阶段
    tabChange (key) {
      const target = this.tabs.find(item => item.id === Number(key))
      this.activeVisitId(target.id)
    }
  }
}
</script>
<style scoped lang="less">
.ant-tabs .ant-tabs-left-bar .ant-tabs-tab,
.ant-tabs .ant-tabs-right-bar .ant-tabs-tab {
  padding: 8px 64px;
}
.flex-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
